<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>逻辑赋值运算符</title>
</head>
<body>
  <script>
    // es2021引入了三个新的逻辑赋值运算符，将逻辑运算符与赋值运算符进行结合
    // 或赋值运算符
    x ||= y;
    // 等同于
    x || (x = y);

    // 与赋值运算符
    x &&= y;
    // 等同于
    x && (x = y);

    // Null 赋值运算符
    x ??= y;
    // 等同于
    x ?? (x = y);
    /**
     * 这三个运算符 相当于先进行逻辑运算，然后根据运算结果，再视情况进行赋值运算。
     * 它们的一个用途是，为变量或属性设置默认值。
    */
    // 老的写法
    user.id = user.id || 1;

    // 新的写法
    user.id ||= 1;
    /**
     * 上面实例中，user.id属性如果不存在，则设为1
     * 新的写法比老的写法更紧凑一些。
    */
   function example(opts) {
     opts.foo = opts.foo ?? 'bar';
     opts.baz ?? (opts.baz = 'qux');
   }
   // 上面实例中，参数对象opts如果不存在foo和baz属性，则为这俩个属性设置默认值
   // 有了‘Null赋值运算符’以后，就可以统一写成下面这样。
   function example(opts) {
    opts.foo ??= 'bar';
    opts.baz ??= 'qux';
  }
  </script>
</body>
</html>